<template>
  <div>
    <el-form ref="dataForm" v-model="query" class="form" :rules="rules">
      <div class="flex">
        <div class="flex">
          <div class="flex-inner">
            <el-form-item prop="ck_007_sys_setting_time1">
              <el-checkbox v-model="query.ck_007_sys_setting_time1">开启门店账单每日自动结算</el-checkbox>
            </el-form-item>
            <el-form-item prop="ck_007_sys_setting_time2">
              <el-checkbox v-model="query.ck_007_sys_setting_time2">开启门店库存每日自动结转</el-checkbox>
            </el-form-item>
          </div>
          <div class="box" />
        </div>
        <el-form-item prop="hour">
          <span style="color: #ccc;">—</span> 每日 <el-time-select
            v-model="query.hour"
            :picker-options="{
              start: '00:00',
              step: '00:01',
              end: '23:59'
            }"
            placeholder="选择时间"
          />  时,自动日结
        </el-form-item>
      </div>
      <el-form-item prop="accountTime">
        对账单手动结转，每日
        <el-time-select
          v-model="query.accountTime"
          :picker-options="{
            start: '00:00',
            step: '00:01',
            end: '23:59'
          }"
          placeholder="选择时间"
        /> 结转
      </el-form-item>
      <el-form-item prop="handTime">
        库存手动结转，每日 <el-time-select
          v-model="query.handTime"
          :picker-options="{
            start: '00:00',
            step: '00:01',
            end: '23:59'
          }"
          placeholder="选择时间"
        /> 结转
      </el-form-item>
      <el-form-item prop="ck_007_sys_setting_2_13">
        <el-checkbox v-model="query.ck_007_sys_setting_2_13">红包提现自动审核</el-checkbox>
      </el-form-item>
      <el-divider />
      <h4>重量转换配置</h4>
      <el-form-item prop="ck_007_sys_setting_2_18">
        <el-checkbox v-model="query.ck_007_sys_setting_2_18">月结对账单对账明细表</el-checkbox>
      </el-form-item>
      <el-form-item prop="ck_007_sys_setting_2_19">
        <el-checkbox v-model="query.ck_007_sys_setting_2_19">销售金额统计</el-checkbox>
      </el-form-item>
      <el-form-item prop="ck_007_sys_setting_2_20">
        <el-checkbox v-model="query.ck_007_sys_setting_2_20">客户用气量统计</el-checkbox>
      </el-form-item>
      <!-- <el-form-item prop="ck_007_sys_setting_sp4_26">
        <el-checkbox v-model="query.ck_007_sys_setting_sp4_26">配送员业绩统计</el-checkbox>
      </el-form-item> -->
      <el-divider />
      <el-form-item prop="ck_007_sys_setting_2_30">
        <el-checkbox v-model="query.ck_007_sys_setting_2_30">客户预付卡充值审核</el-checkbox>
      </el-form-item>
      <div class="form-item">
        <div class="item-label">客户预付卡下单自动扣款:</div>
        <div>
          <el-checkbox v-model="query.ck_007_sys_setting_sp6_13">话务下单</el-checkbox>
          <el-checkbox v-model="query.ck_007_sys_setting_sp6_14">门店下单</el-checkbox>
        </div>
        <el-popover
          class="item-tip"
          placement="right"
          width="200"
          trigger="hover"
        >
          <div>开启后，用户预付卡下单成功后立即扣除预付卡余额</div>
          <i slot="reference" class="el-icon-question radio-icon" />
        </el-popover>
      </div>
      <el-divider />
      <h4>退残配置</h4>
      <el-form-item prop="ck_007_sys_setting_2_31">
        <el-checkbox v-model="query.ck_007_sys_setting_2_31">退残登记自动审核</el-checkbox>
      </el-form-item>
      <h4>押金退款配置</h4>
      <el-form-item prop="ck_007_sys_setting_sp6_4">
        <el-checkbox v-model="query.ck_007_sys_setting_sp6_4">允许实退金额大于应退金额</el-checkbox>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import moment from 'dayjs'

  export default {
    name: 'SettlementTab',
    data() {
      return {
        query: {
          hour: '',
          ck_007_sys_setting_time1: false,
          ck_007_sys_setting_time2: false,
          ck_007_sys_setting_2_13: false,
          ck_007_sys_setting_2_18: false,
          ck_007_sys_setting_2_19: false,
          ck_007_sys_setting_2_20: false,
          ck_007_sys_setting_sp4_26: false,
          ck_007_sys_setting_2_30: false,
          ck_007_sys_setting_2_31: false,
          ck_007_sys_setting_sp6_4: false,
          ck_007_sys_setting_sp6_13: false,
          ck_007_sys_setting_sp6_14: false,
          handTime: '',
          accountTime: ''
        },
        rules: {

        }
      }
    },
    computed: {
      ...mapGetters([
        'corpSettingData', 'userInfo'
      ])
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        if (this.corpSettingData) {
          if (this.corpSettingData.time1) {
            this.query.ck_007_sys_setting_time1 = true
          }
          if (this.corpSettingData.time2) {
            this.query.ck_007_sys_setting_time2 = true
          }
          const min_date = new Date('1969-01-01').getTime()
          console.log(this.corpSettingData.time1)
          console.log(moment(this.corpSettingData.time1).format('HH:mm:ss'))
          if (this.corpSettingData.time1 && moment(this.corpSettingData.time1).valueOf() >= min_date) {
            const time1 = (this.corpSettingData.time1)
            const str1 = moment(time1).format('HH:mm:ss')
            this.query.hour = str1
          }
          if (this.corpSettingData.time2 && moment(this.corpSettingData.time2).valueOf() >= min_date) {
            const time2 = (this.corpSettingData.time2)
            const str2 = moment(time2).format('HH:mm')
            this.query.hour = str2
          }
          this.query.ck_007_sys_setting_2_13 = !!(this.corpSettingData.sp2 >> 13 & 0x01)
          this.query.ck_007_sys_setting_2_18 = !!(this.corpSettingData.sp2 >> 18 & 0x01)
          this.query.ck_007_sys_setting_2_19 = !!(this.corpSettingData.sp2 >> 19 & 0x01)
          this.query.ck_007_sys_setting_2_20 = !!(this.corpSettingData.sp2 >> 20 & 0x01)
          this.query.ck_007_sys_setting_sp4_26 = !!(this.corpSettingData.sp4 >> 26 & 0x01)
          this.query.ck_007_sys_setting_2_30 = !!(this.corpSettingData.sp2 >> 30 & 0x01)
          this.query.ck_007_sys_setting_2_31 = !!(this.corpSettingData.sp2 >> 31 & 0x01)
          this.query.ck_007_sys_setting_sp6_4 = !!(this.corpSettingData.sp6 >> 4 & 0x01)
          this.query.ck_007_sys_setting_sp6_13 = !!(this.corpSettingData.sp6 >> 13 & 0x01)
          this.query.ck_007_sys_setting_sp6_14 = !!(this.corpSettingData.sp6 >> 14 & 0x01)

          if (this.corpSettingData.handTime) {
            const str2 = moment(this.corpSettingData.handTime).format('HH:mm')
            this.query.handTime = str2
          }
          if (this.corpSettingData.accountTime) {
            const time = moment(this.corpSettingData.accountTime).format('HH:mm')
            this.query.accountTime = time
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  .el-form-item {
    margin-bottom: 0;
  }
}
.flex {
  display: flex;
  align-items: center;
  .flex-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .box {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
}
.form-item {
  display: flex;
  margin-top: 5px;
  .item-label {
    margin-right: 20px;
    font-size: 14px;
    color: #606266;
  }
  .item-tip {
    margin-left: 40px;
    color: #606266;
  }
}
</style>
